<script setup lang="ts">
import { previewURLs } from '@/api/video';
import { adjustWebSocketUrl } from '@/utils/adjustWebSocketUrl';

const { mapData } = defineProps(['mapData']);
const rePlayUrls = ref('');
const init = computed(() => {
  return function (data) {
    if (data) {
      // 转换数据格式
      let str = '';
      const arr = JSON.parse(data);
      const transformedData = arr.map((item) => {
        // 获取字典的键和值
        const [key, value] = Object.entries(item)[0];
        // 合并键和值为一个字符串
        return `${key}: ${value}`;
      });
      transformedData.forEach((item) => {
        str += item;
      });
      return str;
    } else {
      return '暂无';
    }
  };
});
onMounted(async () => {
  if (mapData.level_two === '摄像头') {
    const { data } = await previewURLs({
      cameraIndexCode: mapData.resource_id,
      protocol: 'ws'
    });
    rePlayUrls.value = adjustWebSocketUrl(data);
  }
});
</script>

<template>
  <div class="card-box" v-if="mapData.level_two != '摄像头'">
    <div class="card-main-box" v-for="(item, index) in mapData.resource_info" :key="index">
      <div class="card-main-title">{{ item.describe + ':' }}</div>
      <div class="card-main-main" v-if="item.type == 'material_list'">{{ init(item.value) }}</div>
      <div class="card-main-main" v-else>{{ item.value || '暂无' }}</div>
    </div>
  </div>
  <div class="card-box video-box" v-else>
    <video-com-management
      :id="mapData.resource_id"
      class="video-com-management"
      :camera-index-code="mapData.resource_id"
      video-type="0"
      camera-type="0"
      :value="rePlayUrls"
      ref="videoComManagement"
      v-if="rePlayUrls"
    />
  </div>
</template>

<style scoped lang="scss">
.card-box {
  width: 250px;
  min-height: 60px;

  .card-main-box {
    margin-top: 10px;
    display: flex;

    .phone {
      color: #02fbff;
      cursor: pointer;
    }

    .card-main-title {
      min-width: 40%;
      color: #ffffff;
      font-size: 14px;
      opacity: 0.7;
    }

    .card-main-main {
      width: 100%;
      color: #ffffff;
      font-size: 14px;
    }
  }
}

.video-box {
  width: 400px;
  height: 300px;

  .video-com-management {
    width: 100%;
    height: 100%;
  }
}
</style>
